<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../css/index.css">
    <title>合水农业大数据</title>
</head>
<body id="bg">
    <canvas id="canvas"></canvas>
    <header class="header-title">
        <section class="weather">
            <section id="next"></section>
            <section id="city"></section>
            <section id="today">
                <section id="air_msg">空气质量:</section>
                <section id="air"></section>
                <section id="tem">
                    <section id="tem2"></section>
                    <section class="line"></section>
                    <section id="tem1"></section>
                </section>
                
                <section id="wea"></section>
            </section>
        </section>
        <section class="time">
            <span>时间:</span>
            <span id="times"></span>
            <section id="last">
                <section class="last-icon">
                    <img src="../icon/jx1.png" alt="" style="width: 100%;height: 100%;">
                </section>
                <section class="">上一页</section>
            </section>
        </section>
    </header>
    <section class="main">
        <section class="main-box">
            <section class="main-left">
                <section class="environment">
                    <section class="environ-title">环境监测</section>
                    <section class="environ-main">
                        <section class="environ-pie" >
                            <section id="out-pie1">     
                            </section>
                            <section id="pie1">
                                <img src="../icon/wendu.png" alt="" class="pie-icon1">
                                <section class="pie-number1">23</section>
                            </section>
                                <section class="chart-msg">温度</section>   

                        </section>
                         <section class="environ-pie" > 
                             <section id="out-pie2">     
                            </section>
                            <section id="pie2">
                                <img src="../icon/shidu.png" alt="" class="pie-icon2">
                                <section class="pie-number2">60</section>
                            </section>
                                <section class="chart-msg">湿度</section>  
                            
                        </section>
                        <section class="environ-pie" >
                            <section id="out-pie3">     
                            </section>
                            <section id="pie3">
                                <img src="../icon/pm2.5.png" alt="" class="pie-icon3">
                                <section class="pie-number3">100</section>
                            </section>
                                <section class="chart-msg">PM2.5</section>   
                            
                        </section>
                        <section class="environ-pie" >
                            <section id="out-pie4">     
                            </section>
                            <section id="pie4">
                                <img src="../icon/pm10.png" alt="" class="pie-icon4">
                                <section class="pie-number4">100</section>
                            </section>
                                <section class="chart-msg">PM10</section>   
                            
                        </section>
                        <section class="environ-pie" >
                            <section id="out-pie5">     
                            </section>
                            <section id="pie5">
                                <img src="../icon/CH2O.png" alt="" class="pie-icon5">
                                <section class="pie-number5">0.5</section>
                            </section>
                                <section class="chart-msg">CH2O</section>                 
                            
                        </section>
                        <section class="environ-pie" >
                            <section id="out-pie6">     
                            </section>
                            <section id="pie6">
                                <img src="../icon/TVOC.png" alt="" class="pie-icon6">    
                            </section>
                            <section class="pie-number6">0.75</section>
                                <section class="chart-msg">TVOC</section>    -->
                            
                        </section>



                             <!-- <div id="chart1" style="width:100%;height:100%;margin:auto;"></div> -->
                        <!-- <section class="environ-pie">
                            <div id="chart2" style="width:100%;height:100%;margin:auto;"></div>
                            <section class="chart-msg">湿度</section>
                        </section>
                        <section class="environ-pie">
                            <div id="chart3" style="width:100%;height:100%;margin:auto;"></div>
                            <section class="chart-msg">PM2.5</section>
                        </section>
                        <section class="environ-pie">
                            <div id="chart4" style="width:100%;height:100%;margin:auto;"></div>
                            <section class="chart-msg">PM10</section>
                        </section>
                        <section class="environ-pie">
                            <div id="chart5" style="width:100%;height:100%;margin:auto;"></div>
                            <section class="chart-msg">CH2O</section>
                        </section>
                        <section class="environ-pie">
                            <div id="chart6" style="width:100%;height:100%;margin:auto;"></div>
                            <section class="chart-msg">TVOC</section>
                        </section> -->

                        <!-- 为 ECharts 准备一个具备大小（宽高）的 容器 -->
                        <!-- <li class="environ-list"><span>温度</span><span id="ishot_img" ></span></li>
                        <li class="environ-list"><span>湿度</span><span id="wet_img" ></span></li>
                        <li class="environ-list"><span>PM2.5</span><span id="air_pm" ></span></li>
                        <li class="environ-list"><span>CH2O</span><span id="CH2O_number" ></span></li>
                        <li class="environ-list"><span>TVOC</span><span id="TVOC_number" ></span></li> -->
                    </section>
                </section>
                <section class="sheep-video">
                    <section class="video-title">生产现场</section>
                    <section class="video-main">
                        <section class="video">
                            <section id="video_scene1" onclick="video()"></section>
                            <section class="video-msg">监控01</section>
                        </section>
                        <section class="video">
                            <section id="video_scene2" onclick="video()"></section>
                            <section class="video-msg">监控02</section>
                        </section>
                        <section class="video">
                            <section id="video_scene3" onclick="video()"></section>
                            <section class="video-msg">监控03</section>
                        </section>
                        <section class="video">
                            <section id="video_scene4" onclick="video()"></section>
                            <section class="video-msg">监控04</section>
                        </section>
                        
                        <!-- <section id="video_scene2" onclick="video()"></section>
                        <section id="video_scene3" onclick="video()"></section>
                        <section id="video_scene4" onclick="video()"></section> -->
                    </section>
                </section>
            </section>
            <section class="main-map">
                <!-- <section class="sheep-number">奶羊？只</section> -->
                <section id="map"></section>
                <section id="message">
                    <section class="sheep-msg">奶羊<span>20000</span>只</section>
                    <section class="farm">养殖厂<span>100</span>个</section>
                    <section class="Breeder">养殖户<span>200</span>户</section>
                </section>
            </section>
            <section class="main-right">
                <section class="products">
                    <section class="products-title">奶羊分布图</section>
                    <section class="products-main">
                        <div id="main" style=" width: 100%;height:100%;"></div>
                    </section>
                </section>
                <section id="warning">
                    <section class="warning-title">养殖场信息</section>
                    <section id="warning-main">
                        <section id="warning-lsit">
                            <p class="list">养殖场：<span class="name">甘肃数象科技有限公司</span></p>
                            <p class="list">养殖规模：<span class="number">100只</span></p>
                            <p class="list">地址：<span class="address">甘肃省庆阳市合水县</span></p>
                        </section>
                        <section id="warning-lsit">
                            <p class="list">养殖场：<span class="name">甘肃数象科技有限公司</span></p>
                            <p class="list">养殖规模：<span class="number">100只</span></p>
                            <p class="list">地址：<span class="address">甘肃省庆阳市合水县</span></p>
                        </section>
                        <section id="warning-lsit">
                            <p class="list">养殖场：<span class="name">甘肃数象科技有限公司</span></p>
                            <p class="list">养殖规模：<span class="number">100只</span></p>
                            <p class="list">地址：<span class="address">甘肃省庆阳市合水县</span></p>
                        </section>
                        <section id="warning-lsit">
                            <p class="list">养殖场：<span class="name">甘肃数象科技有限公司</span></p>
                            <p class="list">养殖规模：<span class="number">100只</span></p>
                            <p class="list">地址：<span class="address">甘肃省庆阳市合水县</span></p>
                        </section>
                        <section id="warning-lsit">
                            <p class="list">养殖场：<span class="name">甘肃数象科技有限公司</span></p>
                            <p class="list">养殖规模：<span class="number">100只</span></p>
                            <p class="list">地址：<span class="address">甘肃省庆阳市合水县</span></p>
                        </section>
                        <section id="warning-lsit">
                            <p class="list">养殖场：<span class="name">甘肃数象科技有限公司</span></p>
                            <p class="list">养殖规模：<span class="number">100只</span></p>
                            <p class="list">地址：<span class="address">甘肃省庆阳市合水县</span></p>
                        </section>
                        <section id="warning-lsit">
                            <p class="list">养殖场：<span class="name">甘肃数象科技有限公司</span></p>
                            <p class="list">养殖规模：<span class="number">100只</span></p>
                            <p class="list">地址：<span class="address">甘肃省庆阳市合水县</span></p>
                        </section>
                        <section id="warning-lsit">
                            <p class="list">养殖场：<span class="name">甘肃数象科技有限公司</span></p>
                            <p class="list">养殖规模：<span class="number">100只</span></p>
                            <p class="list">地址：<span class="address">甘肃省庆阳市合水县</span></p>
                        </section>
                </section>
            </section>
        </section>
    </section>
    <footer class="footer"></footer>
    
</body>
<script src="../js/echarts.min.js"></script>
<script src="../js/flexible.js"></script>
<script src="../js/jquery-3.3.1.min.js"></script>
<script src="../js/layer-v3.1.1/layer/layer.js"></script>
<script src="http://api.map.baidu.com/api?v=3.0&ak=6ipZZsh0o0gBbkAU1aNyAsA83anTXKh0" type="text/javascript"></script>
<script type="text/javascript" src="../js/bmap.js"></script>
<script type="text/javascript" src="../js/map.js"></script>
<script src="../js/index.js"></script>
<script>
    
    
    var next=document.getElementById('next')
    var last=document.getElementById('last')
    next.addEventListener('click', function(){
        window.scrollTo(window.screen.width, 0);
        })
    last.addEventListener('click', function(){
        window.scrollTo(0, 0);
        })    

//背景
"use strict";

var canvas = document.getElementById('canvas'),
  ctx = canvas.getContext('2d'),
  w = canvas.width = document.body.clientWidth,
  h = canvas.height = document.body.clientHeight,
    
  hue = 217,
  stars = [],
  count = 0,
  maxStars = 1400;

// Thanks @jackrugile for the performance tip! https://codepen.io/jackrugile/pen/BjBGoM
// Cache gradient
var canvas2 = document.createElement('canvas'),
    ctx2 = canvas2.getContext('2d');
    canvas2.width = 100;
    canvas2.height = 100;
var half = canvas2.width/2,
    gradient2 = ctx2.createRadialGradient(half, half, 0, half, half, half);
    gradient2.addColorStop(0.025, '#fff');
    gradient2.addColorStop(0.1, 'hsl(' + hue + ', 61%, 33%)');
    gradient2.addColorStop(0.25, 'hsl(' + hue + ', 64%, 6%)');
    gradient2.addColorStop(1, 'transparent');

    ctx2.fillStyle = gradient2;
    ctx2.beginPath();
    ctx2.arc(half, half, half, 0, Math.PI * 2);
    ctx2.fill();

// End cache

function random(min, max) {
  if (arguments.length < 2) {
    max = min;
    min = 0;
  }
  
  if (min > max) {
    var hold = max;
    max = min;
    min = hold;
  }

  return Math.floor(Math.random() * (max - min + 1)) + min;
}

function maxOrbit(x,y) {
  var max = Math.max(x,y),
      diameter = Math.round(Math.sqrt(max*max + max*max));
  return diameter/2;
}

var Star = function() {

  this.orbitRadius = random(maxOrbit(w,h));
  this.radius = random(60, this.orbitRadius) / 12;
  this.orbitX = w / 2;
  this.orbitY = h / 2;
  this.timePassed = random(0, maxStars);
  this.speed = random(this.orbitRadius) / 50000;
  this.alpha = random(2, 10) / 10;

  count++;
  stars[count] = this;
}

Star.prototype.draw = function() {
  var x = Math.sin(this.timePassed) * this.orbitRadius + this.orbitX,
      y = Math.cos(this.timePassed) * this.orbitRadius + this.orbitY,
      twinkle = random(10);

  if (twinkle === 1 && this.alpha > 0) {
    this.alpha -= 0.05;
  } else if (twinkle === 2 && this.alpha < 1) {
    this.alpha += 0.05;
  }

  ctx.globalAlpha = this.alpha;
    ctx.drawImage(canvas2, x - this.radius / 2, y - this.radius / 2, this.radius, this.radius);
  this.timePassed += this.speed;
}

for (var i = 0; i < maxStars; i++) {
  new Star();
}

function animation() {
    ctx.globalCompositeOperation = 'source-over';
    ctx.globalAlpha = 0.8;
    ctx.fillStyle = 'hsla(' + hue + ', 64%, 6%, 1)';
    ctx.fillRect(0, 0, w, h)
  
  ctx.globalCompositeOperation = 'lighter';
  for (var i = 1, l = stars.length; i < l; i++) {
    stars[i].draw();
  };  
  
  window.requestAnimationFrame(animation);
}

animation();

</script>
</html>